#map-container {
  height: calc(100vh - 84px);
}

.search-container {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 16px;
  background-color: rgba(0, 40, 87, 0.6);
  z-index: 1000;
  width: 80vw;
  color: #ffffff;
}

.detail-container {
  position: absolute;
  bottom: 15px;
  left: 15px;
  padding: 16px;
  z-index: 1000;
  width: 80vw;
  color: #ffffff;
}

.detail-bg {
  background-color: rgba(0, 40, 87, 0.6);
  padding: 8px;
}

.color-grey{
  color: #909399;
}

.color-blue{
  color: #409EFF;
}

.hr-line {
  height: 30px;
  margin-top: 12px;
  border-left: 0px solid #ffffff
}

::v-deep .amap-info-content  {
  background-color: rgba(225, 6, 6, 0.5);
  border-radius: 8px;
  padding: 10px;
  min-width: 280px;

  div {
    line-height: 26px;
    color: #ffffff;
    font-weight: bold;
    font-size:14px;
  }
}

::v-deep .amap-info-sharp {
  border-top: 8px solid rgba(225, 6, 6, 0.5);
}

::v-deep .amap-info-close {
  color: #ffffff;
  right: 10px !important;
}

::v-deep .tag-container {
  display: flex;
  line-height: 0 !important;
  flex-wrap: wrap;

  .warning-img {
    height: 20px;
    width: 20px;
    background-size: contain;
    margin-right: 4px;
    background-image: url("../../../assets/imgs/warning-yellow.png");
  }

  .warning-tag {
    line-height: 0 !important;
    margin: 5px 10px 10px 0;
    background-color: rgb(255, 0, 0);
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 30px;
    img {
      height: 20px;
      margin-right: 4px;
    }
  }
}
